<template>
	<view class="content">
		
		<view class="background">
			<!-- 金额开始 -->
			<view class="money">
				<view class="money-t">可用余额</view>
				
				<view class="money-a">
					<text>{{userInfo.money}}</text>
				</view>
				
				<view class="money-but">
					<button type="primary" class="but1" v-if="userInfo.change_front_show2 == 1" @click="$api.toUrl('/pages/money/moneyTomoney')">余额互转</button>
					<button type="primary" class="but2" v-if="userInfo.change_front_show3 == 1" @click="$api.toUrl('/pages/money/moneyTocash')">余额转购物积分</button>
					<button type="default" class="but3" v-if="userInfo.withdrawal1_front_show == 1" @click="$api.toUrl('/pages/money/withdrawsubmit')">余额提现</button>
				</view>
				
			</view>
			<!-- 金额结束 -->
			
			<!-- 可用余额 明细开始 -->
			<view class="earnings">
				
				<view class="content-item" v-for="(item, index) in moneyList" :key="index">
					<view class="main">
						<view class="title b-t">
							<text class="red">{{ item.description }}</text>
							<text v-if="item.incometype == 0" class="red">+{{item.money}}</text>
							<text v-else class="blue">-{{item.money}}</text>
						</view>
						<view class="bot b-t">
							<text>{{ item.addtime_text }}</text>
							<text class="more-icon yticon icon-you"></text>
						</view>
					</view>
				</view>
				
			</view>
			<!-- 可用余额 明细结束 -->
			
			<uni-load-more :status="loadingType"></uni-load-more>

		</view>
		
		
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: { uniLoadMore },
		data() {
			return {
				headerPosition: 'fixed',
				headerTop: '0px',
				loaded: false, //加载完成
				loadingType: 'more', //加载更多状态
				
				token: '',
				userInfo: {},
				moneyList: [],
				
				p: 1,
				size: 20,
				count: 0
			}
		},
		onLoad(option) {
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
			// #endif
		},
		onShow() {
			this.token = this.$api.get('token');
			if (!this.token) {
				uni.navigateTo(`/pages/public/login`);
			}
			//获取用户信息
			this.getmedate();
			//获取信息
			this.loadData();
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = 'fixed';
			} else {
				this.headerPosition = 'absolute';
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh');
		},
		//上拉加载更多数据
		onReachBottom() {
			this.loadData();
		},
		methods: {
			//获取用户信息
			async getmedate() {
				const param_userinfo = {
					token: this.token
				};
				await this.$http.request('User', 'userinfo', 'GET', param_userinfo, (res) => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							console.log('userinfo',res.data.data);
							this.userInfo = res.data.data;
						}
					}
				});
			},
			
			// 明细
			async loadData(type = 'add') {
				if (this.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more';
				}
			
				if (type === 'refresh') {
					this.moneyList = [];
					this.p = 1;
					this.count = 0;
					//下拉刷新停止
					uni.stopPullDownRefresh();
				}
				
				const param = {};
				param.token = this.token;
				param.p = this.p;
				param.size = this.size;
				await this.$http.request('User', 'moneylog', 'GET', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							
							if(res.data.data.count > 0){
								this.moneyList = this.moneyList.concat(res.data.data.list);
							}
							
							this.p = this.p + 1;
							this.count = res.data.data.count;
							this.loaded = true;
							
							//判断是否还有下一页，有是more  没有是nomore
							if(this.count){
								this.loadingType = this.count <= (this.p - 1) * this.size ? 'nomore' : 'more';
							}else{
								this.loadingType = 'nomore';
							}
							
						}
					}
					
				});
			},
			
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			
			navmenuTo(url) {
				uni.reLaunch({
					url
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}
	.content {
		height: calc(100vh);
		// 全局两边间距
		.background {
			padding: 0 10upx;
		}
		// 字体红色
		.red {
			color: red;
		}
		
		// 字体蓝色
		.blue {
			color: blue;
		}
		
		// 金额开始
		.money {
			padding: 10upx 20upx;
			width: 100%;
			height: 250upx;
			background: url(/static/images/money_bg.png) no-repeat;
			background-size: cover;
			color: #FFFFFF;
			position: relative;
			
			.money-t {
				margin-top: 20upx;
				font-size: 28upx;
			}
			.money-a {
				margin-top: 20upx;
				font-size: 36upx;
			}
			
			.but1{
				position: absolute;
				top: 150upx;
				left: 20upx;
			}
			
			.but2{
				position: absolute;
				top: 150upx;
				left: 225upx;
				width: 290upx;
			}
			
			.but3{
				position: absolute;
				top: 150upx;
				left: 530upx;
			}
			
		}
		
		.content-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 10upx;
			
			.main {
				width: 100%;
				padding: 0 24upx;
				background-color: #fff;
				border-radius: 4upx;
			}
			
			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 40upx;
				padding: 10upx 10upx;
				font-size: 26upx;
				color: #303133;
				position: relative;
			}
			
			.bot {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 60upx;
				font-size: 24upx;
				color: #707070;
				position: relative;
			}
			
			.more-icon {
				font-size: 32upx;
			}
			
		}


	}
</style>
